<template>
  <div class="authority">
    <div class="app-case">
      <div class="app-content">
        <div class="grouping">分组权限维护</div>
        <div class="content">
          <div class="content-left">
            <div class="title">系统分组</div>
            <div class="content">
              <div
                class="content-case"
                :class="{ 'content-case-active': activeSystem == i }"
                @click="systemClick(item, i)"
                v-for="(item, i) in system"
                :key="i"
              >
                {{ item.Value }}
              </div>
            </div>
          </div>
          <div class="content-right">
            <div class="content-right-top">
              <div class="title">门诊住院医生超级权限</div>
              <el-button type="primary" @click="saveClick">
                <template #icon>
                  <svg-icon icon-class="Group" />
                </template>
                保存
              </el-button>
            </div>
            <div class="content-right-bottom">
              <div class="content-right-box">
                <div class="content-right-box-title">
                  <div class="content-right-box-title-left">
                    <el-checkbox
                      v-model="modulecheckAll"
                      :indeterminate="moduleisIndeterminate"
                      @change="modulehandleCheckAllChange"
                    >
                    </el-checkbox>
                    <div style="margin-top: -2px; margin-left: 8px">
                      模块名称
                    </div>
                  </div>
                  <div class="content-right-box-title-right">
                    <el-checkbox
                      v-model="menucheckAll"
                      :indeterminate="menuisIndeterminate"
                      @change="menuhandleCheckAllChange"
                    >
                    </el-checkbox>
                    <div style="margin-top: -2px; margin-left: 8px">
                      菜单名称
                    </div>
                  </div>
                </div>
                <div class="content-right-box-content">
                  <div class="content-right-box-content-left">
                    <el-checkbox-group
                      style="width: 100%"
                      v-model="modulecheckedCities"
                      @change="modulehandleCheckedCitiesChange"
                    >
                      <div
                        class="modulenotActive"
                        :class="{ moduleActive: moduleActive == i }"
                        @click="moduleclick(item, i)"
                        v-for="(item, i) in modulecities"
                        :key="i"
                      >
                        <el-checkbox
                          style="width: 100%"
                          :label="item.title"
                          :value="item.name"
                        >
                          <div
                            style="width: 100%; height: 100%"
                            @click="modulechildclick($event)"
                          >
                            {{ item.title }}
                          </div>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                  <div class="content-right-box-content-right">
                    <el-checkbox-group
                      v-model="menucheckedCities"
                      @change="menuhandleCheckedCitiesChange"
                    >
                      <div
                        class="modulenotActive"
                        :class="{ menuActive: menuActive == i }"
                        @click="menuclick(item, i)"
                        v-for="(item, i) in menucities"
                        :key="i"
                      >
                        <div v-if="item.title">
                          <el-checkbox :label="item.title" :value="item.name">
                            <div @click="menuchildclick($event)">
                              {{ item.title }}
                            </div>
                          </el-checkbox>
                        </div>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="fenzuquanxianweihu">
import { ref, onMounted } from "vue";
const system = ref([]);
const activeSystem = ref(0);
const moduleActive = ref(0);
const menuActive = ref(0);

const modulecheckAll = ref(false);
const moduleisIndeterminate = ref(true);
const modulecheckedCities = ref([""]);
const modulecities = ref([]);

const menucheckAll = ref(false);
const menuisIndeterminate = ref(true);
const menucheckedCities = ref([]);
const menucities = ref([]);
const menucitiesCopy = ref([]);

const systemClick = async (item, i) => {
  activeSystem.value = i;
  menucheckAll.value = false;
  menuisIndeterminate.value = true;
  menucheckedCities.value = [];
  menucities.value = [];
  menucitiesCopy.value = [];
  moduleActive.value = 0;
  menuActive.value = 0;
  const res = await window.xinpuHttpApi("100016", { fzbh: item.Key });
  console.log("模块名称数据", res);
  if (res && res.Flag) {
    modulecheckedCities.value = [];
    if (res.ReContent && res.ReContent.length > 0) {
      modulecities.value.forEach((it) => {
        if (!res.ReContent.some((item) => item.mkbm.includes(it.name))) {
          modulecheckedCities.value.push(it.name);
          moduleclickCopy(it, i)
        }
      });
      // res.ReContent.forEach((element, i) => {
      //   moduleclickCopy(element, i)
      // });
    }
    let reduces = await window.xinpuWebsApi('GetUserMenu',null)
    menucities.value = reduces.ReContent[menuActive.value].children
    console.log(menucities.value);
    const result = await window.xinpuHttpApi('100015',{"fzbh":item.Key,"mkbm":modulecities.value[moduleActive.value].name})
    console.log("应该展示的菜单名称",result.ReContent);
    if(result.ReContent && result.ReContent.length>0){
      menucities.value.forEach((it) => {
        if (result.ReContent.some((items) => items.cdbh.includes(it.name))) {
          
        }else{
            if (result.ReContent.length !== menucities.value.length) {
                    menucheckedCities.value.push(it.name);
            }
        }
      });
    }else{
        menucities.value.forEach(it=>{
            menucheckedCities.value.push(it.name)
        })
    }
    menucitiesCopy.value.push({
        name:modulecities.value[moduleActive.value].name,
        menucities:menucities.value,
        menucheckedCities:menucheckedCities.value
    })
  } else {
    window.xinpuMessageOpen("error", res.CodeMsg);
  }
};
const moduleclickCopy = async (item, i) => {
  if(item.name !== 'SystermManager'){
    let menuchecked = []
    let res = await window.xinpuHttpApi("100015", {
      fzbh: system.value[activeSystem.value].Key,
      mkbm: item.name,
    });
    if(res && res.ReContent){
      if(res.ReContent.length>0){
          item.children.forEach(items=>{
            if(!res.ReContent.some(obj => obj.cdbh.includes(items.name))){
              menuchecked.push(items.name)
            }
          })
      }else{
        item.children.forEach(item=>{
          menuchecked.push(item.name)
        })
      }
    }
    menucitiesCopy.value.push({
      name: item.name,
      menucities: item.children,
      menucheckedCities: menuchecked,
    });
  }
};
const moduleclick = async (item, i) => {
  moduleActive.value = i;
  menuActive.value = 0;
  if (!menucitiesCopy.value.some((its) => its.name.includes(item.name))) {
    let reduces = await window.xinpuWebsApi("GetUserMenu", null);
    menucities.value = reduces.ReContent[moduleActive.value].children;
    console.log(menucities.value);
    const result = await window.xinpuHttpApi("100015", {
      fzbh: system.value[activeSystem.value].Key,
      mkbm: item.name,
    });
    if (result.ReContent && result.ReContent.length > 0) {
      menucities.value.forEach((it) => {
        if (result.ReContent.some((items) => items.cdbh.includes(it.name))) {
          
        }else{
            if (result.ReContent.length !== menucities.value.length) {
                if (modulecheckedCities.value.includes(item.name)) {
                    menucheckedCities.value.push(it.name);
                }
            }
        }
        
      });
    } else {
      if (modulecheckedCities.value.includes(item.name)) {
        menucities.value.forEach((it) => {
          menucheckedCities.value.push(it.name);
        });
      }
    }
    menucitiesCopy.value.push({
      name: modulecities.value[moduleActive.value].name,
      menucities: menucities.value,
      menucheckedCities: menucheckedCities.value,
    });
    console.log(menucitiesCopy.value);
  } else {
    menucitiesCopy.value.forEach((v) => {
      if (v.name == item.name) {
        menucities.value = v.menucities;
        menucheckedCities.value = v.menucheckedCities;
      }
    });
  }
};

const menuclick = (item, i) => {
  menuActive.value = i;
};

const modulechildclick = (event) => {
  event.preventDefault();
};

const menuchildclick = (event) => {
  event.preventDefault();
};

const modulehandleCheckAllChange = (val) => {
  if (val) {
    let arr = [];
    modulecities.value.forEach((v) => {
      arr.push(v.name);
    });
    modulecheckedCities.value = arr;
  } else {
    modulecheckedCities.value = [];
  }
  moduleisIndeterminate.value = false;
};
const modulehandleCheckedCitiesChange = (value) => {
  const checkedCount = value.length;
  modulecheckAll.value = checkedCount === modulecities.value.length;
  moduleisIndeterminate.value =
    checkedCount > 0 && checkedCount < modulecities.value.length;
};

const menuhandleCheckAllChange = (val) => {
  if (val) {
    let arr = [];
    menucities.value.forEach((v) => {
      arr.push(v.name);
    });
    menucheckedCities.value = arr;
    menucitiesCopy.value.forEach((v) => {
      if (v.name == modulecities.value[moduleActive.value].name) {
        v.menucheckedCities = arr;
      }
    });
  } else {
    menucheckedCities.value = [];
  }
  menuisIndeterminate.value = false;
};
const menuhandleCheckedCitiesChange = (value) => {
  menucitiesCopy.value.forEach((v) => {
    if (v.name == modulecities.value[moduleActive.value].name) {
      v.menucheckedCities = value;
    }
  });
  const checkedCount = value.length;
  menucheckAll.value = checkedCount === menucities.value.length;
  menuisIndeterminate.value =
    checkedCount > 0 && checkedCount < menucities.value.length;
};
const getSystem = async () => {
  const res = await window.xinpuWebsApi("GetFixCode", { bh: "xp_qxgroup" });
  console.log("系统分组", res);
  if (res && res.Flag) {
    system.value = res.ReContent;
    systemClick(system.value[activeSystem.value], activeSystem.value);
  } else {
    window.xinpuMessageOpen("error", res.CodeMsg);
  }
};

const gethosmenu = async () => {
  const res = await window.xinpuWebsApi("GetHosMenu", null);
  console.log(res);
  if (res && res.Flag) {
    modulecities.value = res.ReContent;
  } else {
    window.xinpuMessageOpen("error", res.CodeMsg);
  }
};

const menucitiesCopyShai = (item) => {
  console.log(item);
  let result = []
  menucitiesCopy.value.forEach(v=>{
    if(v.name == item.name){
      if(v.menucheckedCities && v.menucheckedCities.length<1){
        result = v.menucities
      }else{
        if(v.menucheckedCities.length == v.menucities.length){
        }else{
          v.menucities.forEach(element=>{
            if(element.title){
              if(v.menucheckedCities.includes(element.name)){
                element.xz = 1
                result.push(element)
              }else{
                element.xz = 0
                result.push(element)
              }
            }
          })
        }
      }
      
    }else{
      
    }
  })
  return result
};

const saveClick = async () => {
  console.log(modulecheckedCities.value);
  let modules = [];
  modulecities.value.forEach((item) => {
    if(!modulecheckedCities.value.includes(item.name)){
      modules.push({
        mklb: 0,
        mkbm: item.name,
        mkmc: item.title,
        xz: 0,
        cdxx: [],
      });
    }else{
      let modulessult = menucitiesCopyShai(item)
      console.log(modulessult);
      let memus = []
      if(modulessult && modulessult.length>0){
        modulessult.forEach(ele=>{
          console.log(ele,"这是获取的结果");
          memus.push({
            "cdbh": ele.name,
            "cdmc": ele.title,
            "xz": ele.xz,
          })
        })
        modules.push({
          mklb: 0,
          mkbm: item.name,
          mkmc: item.title,
          xz: 1,
          cdxx: memus,
        });
      }else{
        modules.push({
          mklb: 0,
          mkbm: item.name,
          mkmc: item.title,
          xz: 1,
          cdxx: [],
        });
      }
    }
    
  })
  
  console.log('第一个参数',system.value[activeSystem.value]);
  console.log('第二个参数',modules);
  const result = await window.xinpuHttpApi("100014", {
    DDDList: system.value[activeSystem.value],
    mkxx: modules,
  });
  if(result && result.Flag){
    window.xinpuMessageOpen('success',"保存成功")
    system.value = [];
    activeSystem.value = 0;
    moduleActive.value = 0;
    menuActive.value = 0;
    modulecheckAll.value = false;
    moduleisIndeterminate.value = true;
    modulecheckedCities.value = [""];
    modulecities.value = [];
    menucheckAll.value = false;
    menuisIndeterminate.value = true;
    menucheckedCities.value = [];
    menucities.value = [];
    menucitiesCopy.value = [];
    getSystem();
    gethosmenu();
  }else{
    window.xinpuMessageOpen('error',result.CodeMsg)
  }
};

onMounted(() => {
  getSystem();
  gethosmenu();
});
</script>

<style lang="scss" scoped>
:deep(.el-button) {
  .el-icon {
    font-size: 16px !important;
  }
}
.modulenotActive {
  :deep(.el-checkbox__label) {
    width: 100%;
    height: 100%;
    padding: 9px 4px;
    box-sizing: border-box;
    margin-left: 4px;
  }
}
.moduleActive {
  :deep(.el-checkbox__label) {
    color: #fff;
    width: 100%;
    height: 100%;
    padding: 9px 4px;
    box-sizing: border-box;
    background: var(--el-color-primary);
    border-radius: 4px 4px 4px 4px;
    margin-left: 4px;
  }
}
.menuActive {
  :deep(.el-checkbox__label) {
    color: #fff;
    width: 100%;
    height: 100%;
    padding: 9px 4px;
    box-sizing: border-box;
    background: var(--el-color-primary);
    border-radius: 4px 4px 4px 4px;
    margin-left: 4px;
  }
  :deep(.el-checkbox) {
    width: 50% !important;
  }
}
.authority {
  width: 100%;
  height: calc(100vh - 106px);
  overflow-y: scroll;
  background: #f7f7f7;
  padding: 16px;
  box-sizing: border-box;
  .app-case {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px 4px 4px 4px;
    padding: 16px;
    box-sizing: border-box;
    .app-content {
      width: 100%;
      height: 100%;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #e0e0e0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .grouping {
        width: 100%;
        height: 40px;
        background: #f7f7f7;
        border-radius: 4px 4px 0px 0px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;
        padding: 0 16px;
        box-sizing: border-box;
      }
      .content {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        .content-left {
          flex: 0 0 240px;
          height: 100%;
          border-right: 1px solid #e0e0e0;
          border-radius: 0px 0px 0px 3px;
          padding: 16px;
          box-sizing: border-box;
          .title {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            margin-bottom: 10px;
          }
          .content {
            font-size: var(--size);
            color: #333333;
            width: 100%;
            display: flex;
            flex-direction: column;
            .content-case {
              width: 100%;
              height: 36px;
              cursor: pointer;
              border-radius: 4px 4px 4px 4px;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              padding-left: 8px;
              box-sizing: border-box;
            }
            .content-case-active {
              color: #fff;
              background: var(--el-color-primary);
            }
          }
        }
        .content-right {
          flex: 1;
          height: 100%;
          padding: 16px 0 0 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          .content-right-top {
            width: 100%;
            height: 49px;
            padding: 0 16px 16px 16px;
            box-sizing: border-box;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title {
              font-weight: bold;
              font-size: 16px;
              color: #333333;
            }
          }
          .content-right-bottom {
            flex: 1;
            padding: 16px;
            box-sizing: border-box;

            .content-right-box {
              width: 100%;
              height: 100%;
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #e0e0e0;
              display: flex;
              flex-direction: column;
              .content-right-box-title {
                width: 100%;
                height: 39px;
                background: #f7f7f7;
                border-radius: 4px 4px 0px 0px;
                display: flex;
                align-items: center;
                .content-right-box-title-left {
                  flex: 0 0 35%;
                  height: 100%;
                  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                  font-weight: 400;
                  font-size: 16px;
                  color: #999999;
                  display: flex;
                  align-items: center;
                  padding-left: 20px;
                  box-sizing: border-box;
                  border-right: 1px solid #e0e0e0;
                }
                .content-right-box-title-right {
                  flex: 1;
                  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                  font-weight: 400;
                  font-size: 16px;
                  color: #999999;
                  display: flex;
                  align-items: center;
                  padding-left: 20px;
                  box-sizing: border-box;
                }
              }
              .content-right-box-content {
                width: 100%;
                flex: 1;
                display: flex;
                align-items: flex-start;
                .content-right-box-content-left {
                  flex: 0 0 35%;
                  min-height: 100%;
                  padding: 12px 20px;
                  box-sizing: border-box;
                  border-right: 1px solid #e0e0e0;
                }
                .content-right-box-content-right {
                  flex: 1;
                  max-height: 660px;
                  overflow-y: scroll;
                  padding: 12px 20px;
                  box-sizing: border-box;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>